<template>
  <view class="gameRecord">
    <view class="tabs">
      <view class="tabs-container">
        <view @tap="onClickTab(index)" :class="{ active: current === index }" v-for="(item, index) in tabs" :key="index" v-text="item.title"></view>
      </view>
    </view>
    <swiper :current="current" @change="onChangeSwiper">
      <swiper-item>
        <scroll-view scroll-y class="table" @scrolltolower="onLoadMore">
          <view class="tr">
            <view class="th">预测内容</view>
            <view class="th">赛事信息</view>
            <view class="th">结果</view>
          </view>
          <view class="tr bg-white" v-for="(item, index) in tabs[0].list" :key="index">
            <view class="td" v-text="item.oddName"></view>
            <view class="td">
              <view class="match-name">{{ item.matchName }}</view>
              <view class="vs">{{ item.teamAName }} VS {{ item.teamBName }}</view>
              <view class="bet-name" v-text="item.betName"></view>
              <view class="time">{{ item.time | dateFormat }}</view>
            </view>
            <view class="td">
              <view class="win" v-if="item.win === 1">
                <view class="">积分</view>
                <view class="text-red" style="margin-top: 6upx;margin-left: 6upx;">+ {{ item.reward }}</view>
              </view>
              <view style="color: #000000;" v-else-if="item.win === -1">预测失败</view>
              <view class="win" v-else>
                <view class="">预期</view>
                <view style="margin-top: 6upx;margin-left: 6upx;color: #0f86c3;">+ {{ item.expectReward }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y class="table" @scrolltolower="onLoadMore">
          <view class="tr">
            <view class="th">开奖结果</view>
            <view class="th">购买记录</view>
            <view class="th">结果</view>
          </view>
          <view class="tr bg-white" v-for="(item, index) in tabs[1].list" :key="index">
            <view class="td">
              <view class="avatar">
                <image :src="item.hero.icon"></image>
                <view class="no" v-text="item.hero.no"></view>
              </view>
            </view>
            <view class="td">
              <view v-if="item.num">英雄编号：{{ item.num === 1 ? "单" : "双" }} x {{ item.numAp }}</view>
              <view v-if="item.sex">英雄性别：{{ item.sex === 1 ? "男" : "女" }} x {{ item.sexAp }}</view>
              <view v-if="item.remote">攻击方式：{{ item.remote === 1 ? "远程" : "近战" }} x {{ item.remoteAp }}</view>
              <view v-if="item.magic">有无魔法：{{ item.magic === 1 ? "有" : "无" }} x {{ item.magicAp }}</view>
            </view>
            <view class="td">
              <view class="win" v-if="item.reward">
                <view>积分</view>
                <view class="text-red" style="margin-top: 6upx;margin-left: 6upx;">+ {{ item.reward }}</view>
              </view>
              <view style="color: #000000;" v-else>预测失败</view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import baseMixins from "@/utils/mixins";
const size = 10;
export default {
  mixins: [baseMixins],
  data() {
    return {
      tabs: [
        {
          title: "赛事中心",
          page: 1,
          list: [],
          total: 0,
          func: () => this.getCherrRecord()
        },
        {
          title: "英雄乐",
          page: 1,
          list: [],
          total: 0,
          func: () => this.getGuessHeroRecord()
        }
      ],
      current: 0
    };
  },
  watch: {
    current: {
      handler(n) {
        if (!n.list) {
          this.tabs[this.current].func();
        }
      }
    }
  },
  methods: {
    __init() {
      Object.assign(this.tabs[this.current], {
        page: 1,
        list: [],
        total: 0
      });
      return this.tabs[this.current].func();
    },
    getCherrRecord() {
      return this.$api.video.getCherrRecord(this.tabs[0].page, size).then(_ => {
        this.tabs[0].list = [...this.tabs[0].list, ..._.data.data.list];
        this.tabs[0].total = _.data.data.total;
        return _.data.data;
      });
    },
    getGuessHeroRecord() {
      return this.$api.guessHero.getGuessHeroRecord(this.tabs[1].page, size).then(_ => {
        this.tabs[1].list = [...this.tabs[1].list, ..._.data.data.list];
        this.tabs[1].total = _.data.data.total;
        return _.data.data;
      });
    },
    onLoadMore() {
      if (this.tabs[this.current].total <= this.tabs[this.current].list.length) {
        return false;
      }
      this.tabs[this.current].page++;
      this.tabs[this.current].func().catch(e => {
        this.tabs[this.current].page--;
      });
    },
    onClickTab(index) {
      this.current = index;
      this.tabs[index].page = 1;
      this.tabs[index].list = [];
    },
    onChangeSwiper({ detail }) {
      this.current = detail.current;
      this.tabs[detail.current].page = 1;
      this.tabs[detail.current].list = [];
    }
  },
  onPullDownRefresh() {
    Object.assign(this.tabs[this.current], {
      page: 1,
      list: [],
      total: 0
    });
    this.tabs[this.current].func().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.gameRecord {
  overflow: hidden;
  height: 100%;
  .tabs {
    margin: 30upx auto 0 auto;
    text-align: center;
    .tabs-container {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border: 2upx solid #0f86c3;
      border-radius: 4upx;
      border-radius: 10upx;
      view {
        padding: 10upx 80upx;
        color: #0f86c3;
        &.active {
          background-color: #0f86c3;
          color: #ffffff;
        }
      }
    }
  }
  swiper {
    height: calc(100% - 94upx);
    scroll-view {
      height: 100%;
    }
  }
  .table {
    width: 96%;
    margin: 0 auto;
    font-size: 24upx;
    .tr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10upx 0;

      .win {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .avatar {
        height: 100upx;
        width: 100upx;
        position: relative;
        margin: 0 auto;
        image {
          width: 100%;
          height: 100%;
        }
        .no {
          position: absolute;
          bottom: 0;
          right: 0;
          background-color: rgba($color: #000000, $alpha: 0.76);
          color: #ffffff;
          padding: 0 8upx;
        }
      }

      .td:first-child,
      .th:first-child {
        width: 25%;
        text-align: center;
      }
      .td:nth-child(2),
      .th:nth-child(2) {
        width: 55%;
      }
      .td:last-child,
      .th:last-child {
        width: 20%;
        text-align: center;
      }
      &.bg-white {
        margin-bottom: 10upx;
      }
    }
  }
}
</style>
